<template>
    <div class="wholeContainer">
        <ForumHeader/>
        <div class="myCollect" v-if="total">
            <div class="myCollectContent">
                <div class="myCollectContentItem" v-for="(item,index) in postList" :key="index">
                    <ForumItem :forumIt="item"></ForumItem>
                </div>
            </div>
        </div>
        <div class="paginationContainer" v-if="total">
        <el-pagination
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="pagination.p"
          :page-size="pagination.pageSize"
          layout="total,prev, pager, next,->,jumper,sizes"
          
          :total="total">
        </el-pagination>
      </div>
        <div v-if="!total" class="showInfo">
            暂无帖子，快去发帖吧~
        </div>
    </div>
</template>

<script>
import ForumItem from '../ForumItem.vue'
import ForumHeader from '../ForumHeader.vue'
export default {
    name:'MyPost',
    data(){
        return{
            postList:[],
            errMsg:'',
            pagination: {
                pageSize: 10,
                p: 1
            },
            total:0
        }
    },
    components:{
        ForumItem,
        ForumHeader
    },
    mounted(){
        this.$axios({
            method:'get',
            url:`/api/posts/all/${localStorage.getItem('userId')}/${this.pagination.p}/${this.pagination.pageSize}`,
            headers:{
                'Content-Type':'application/json',
                'token':localStorage.getItem('token')
            }
        }).then(res=>{
            console.log(res)
            if(res.data.code==0){
                this.errMsg = res.data.msg
            }else{
                this.postList = res.data.data.data
                this.total = res.data.data.total
            }
        })
    },
    methods:{
        handleSizeChange(val){
            this.pagination.pageSize = val
            this.$axios({
                method:'get',
                url:`/api/posts/all/${localStorage.getItem('userId')}/${this.pagination.p}/${val}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                console.log(res)
                if(res.data.code==0){
                    this.errMsg = res.data.msg
                }else{
                    this.postList = res.data.data.data
                }
            })
        },
        handleCurrentChange(val){
            this.pagination.p = val
            this.$axios({
                method:'get',
                url:`/api/posts/all/${localStorage.getItem('userId')}/${val}/${this.pagination.pageSize}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                console.log(res)
                if(res.data.code==0){
                    this.errMsg = res.data.msg
                }else{
                    this.postList = res.data.data.data
                }
            })
        }
    }
}
</script>

<style>
    .paginationContainer{
        margin: 10px auto;
        width: 60%;
    }
    .myCollect{
        width: 100%;
        height: 100%;
        /* background-color: #f5f5f5; */
    }
    .myCollectContentItem{
        height: 100%;
    }
</style>